import React from 'react';
import { inject, observer } from 'mobx-react';
import { routerShape } from 'react-router';
import { WeaTableNew } from 'comsMobx';

let WeaTable = WeaTableNew.WeaTable;
import {
  WeaTab,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaDialog,
  WeaLocaleProvider,
} from 'ecCom';
import { Button } from 'antd';
import { toJS } from 'mobx';
import PageSpin from '../../public/PageSpin';
import NoViewRightPage from '../../public/NoViewRightPage';

const MAILPAGENAME = 'EMAILMONITORLOG';

const store = ['routing', 'emailMonitorLogStore'];

import * as EmailUtil from '../../util/EmailUtil';
import EmailConstant from '../../constants/EmailConstant';

const getLabel = WeaLocaleProvider.getLabel;
/**
 * 邮件 - 邮件监控
 */
@inject(...store)
@observer
class EmailMonitorLog extends React.Component {
  static contextTypes = {
    router: routerShape,
  };

  constructor(props) {
    super(props);
    this.state = {
      height: 480,
    };
  }
  componentDidMount() {
    const { emailMonitorLogStore } = this.props;

    emailMonitorLogStore.doTableLoading(); // 初始化列表
    emailMonitorLogStore.initConditionDatas(); // 初始化高级搜索区域
  }

  componentWillUnmount() {
    // 组件卸载时一般清理一些状态
    const { emailMonitorLogStore } = this.props;

    emailMonitorLogStore.setShowSearchAd(false);
    emailMonitorLogStore.clearFormFields();
  }

  render() {
    const { emailMonitorLogStore } = this.props;
    const {
      viewRightInitCompleted,
      viewRight,
      deleteDialogVisible,
      comsWeaTableStore,
      loading,
      form,
      conditioninfo,
      showSearchAd,
      searchParamsAd,
    } = emailMonitorLogStore;
    let { height } = this.state;

    if (!viewRightInitCompleted) {
      return (
        <PageSpin
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_PageSpin@418ppl`}
        />
      );
    } else if (!viewRight) {
      return (
        <NoViewRightPage
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_NoViewRightPage@9mb6r0`}
        />
      );
    }

    return (
      <WeaDialog
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaDialog@y45qrq`}
        visible={deleteDialogVisible}
        title={getLabel(24622, '监控日志')}
        style={{ width: 708, height: 480 }}
        onCancel={() => {
          this.closeDeleteDialog();
        }}
        icon={EmailConstant.iconClassName}
        iconBgcolor={EmailConstant.iconBgColor}
        onChangeHeight={this.changeHeight}
      >
        <div className="wea-email-monitorLog">
          <WeaRightMenu
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaRightMenu@a3umyd`}
            datas={this.getRightMenu()}
            onClick={this.onRightMenuClick}
          >
            <WeaTab
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_WeaTab@z9bpl3`}
              buttonsAd={this.getTabButtonsAd()}
              searchType={['base', 'advanced']}
              setShowSearchAd={(bool) => {
                emailMonitorLogStore.setShowSearchAd(bool);
              }}
              showSearchAd={showSearchAd}
              hideSearchAd={() => emailMonitorLogStore.setShowSearchAd(false)}
              searchsAd={EmailUtil.getSearchs(form, conditioninfo, () => {
                emailMonitorLogStore.setShowSearchAd(false);
                emailMonitorLogStore.doTableLoading(searchParamsAd);
              })}
              onSearch={() => {
                emailMonitorLogStore.doTableLoading(searchParamsAd);
              }}
            />
            <WeaTable
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_WeaTable@7iv216`}
              comsWeaTableStore={comsWeaTableStore}
              loading={loading}
              needScroll={true}
              hasOrder={true}
              scroll={{ y: height - 150 }}
            />
          </WeaRightMenu>
        </div>
      </WeaDialog>
    );
  }

  // 右键菜单
  getRightMenu() {
    let btns = [];
    btns.push({
      key: 'search',
      icon: <i className="icon-coms-search" />,
      content: getLabel(197, '搜索'),
    });
    btns.push({
      key: 'ShowCustomColumns',
      icon: <i className="icon-coms-Custom" />,
      content: getLabel(382660, '显示定制列'),
    });
    // btns.push({ key: "collection", icon: <i className='icon-coms-Custom'/>, content: '收藏' });
    // btns.push({ key: "help", icon: <i className='icon-coms-Custom'/>, content: '帮助' });
    return btns;
  }

  // 右键菜单事件绑定
  onRightMenuClick = (key) => {
    const { emailMonitorLogStore } = this.props;
    if (key == 'search') {
      emailMonitorLogStore.doTableLoading();
      emailMonitorLogStore.setShowSearchAd(false);
    } else if (key == 'ShowCustomColumns') {
      const { comsWeaTableStore, sessionkey } = toJS(emailMonitorLogStore);
      comsWeaTableStore.setColSetVisible(sessionkey, true);
      comsWeaTableStore.tableColSet(sessionkey, true);
    }
  };

  // 高级搜索底部按钮定义
  getTabButtonsAd() {
    const { emailMonitorLogStore } = this.props;
    return [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@jk3oo5@${MAILPAGENAME}search`}
        type="primary"
        onClick={() => {
          emailMonitorLogStore.setShowSearchAd(false);
          emailMonitorLogStore.doTableLoading();
        }}
      >
        {getLabel(197, '搜索')}
      </Button>,
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@jk460g@${MAILPAGENAME}reset`}
        type="ghost"
        onClick={() => {
          emailMonitorLogStore.clearFormFields();
        }}
      >
        {getLabel(2022, '重置')}
      </Button>,
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@p8k9d1@${MAILPAGENAME}cancel`}
        type="ghost"
        onClick={() => {
          emailMonitorLogStore.setShowSearchAd(false);
        }}
      >
        {getLabel(201, '取消')}
      </Button>,
    ];
  }

  // 执行搜索方法（也可用于刷新table）
  executeSearch() {
    const { emailMonitorLogStore } = this.props;
    emailMonitorLogStore.setShowSearchAd(false);
    emailMonitorLogStore.doTableLoading();
  }

  // 获得table选中行的主键值数组。若没选中任何一条，返回空数组
  getTableSelectedValues() {
    const { emailMonitorLogStore } = this.props;
    const { comsWeaTableStore } = emailMonitorLogStore;
    let values = comsWeaTableStore.selectedRowKeys;
    return values.slice();
  }

  // 关闭删除对话框的回调
  closeDeleteDialog = () => {
    const { emailMonitorLogStore } = this.props;
    emailMonitorLogStore.showMonitorLogDialog(false);
    emailMonitorLogStore.form.resetForm();
  };

  changeHeight = (height) => {
    this.setState({ height });
  };
}

export default WeaTools.tryCatch(
  React,
  props => (
    <WeaErrorPage
      ecId={`${
        (this && this.props && this.props.ecId) || ''
      }_WeaErrorPage@z71gmu`}
      msg={
        props.error
          ? props.error
          : getLabel(186, '对不起，该页面异常，请联系管理员！', 'error')
      }
    />
  ),
  { error: '' },
)(EmailMonitorLog);
